<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饿了吗</title>
    <link rel="stylesheet" type="text/css" href="css/ele.css"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>

</head>
<body>

<div class="all">
<div class="chapter1" style="display: inline" >
<div class="title_first">

    <p class="title_first"><img src="statics/location.png" width="20" height="20" /><span class="title_first" >北京邮电大学 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span><img src="statics/weather.png" width="20" height="20" /></p>
    <input class="title_first " placeholder="输入商家、商品名称" type="text"> <br>
    <table class="search" border="0">
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                奶茶
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                粥
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                冒菜
            <td>
                &nbsp;
            </td>
            <td>
                水果减20起
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                山西刀削面
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                黄焖鸡
            </td>
            <td>
                &nbsp;
            </td>
            <td>
                汉堡
            </td>
        </tr>
    </table>
</div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
              <div class="second_1">
                 <div>
                    <img class="food_1" src="statics/food-1.png"/>
                    <div class="food_meishi">美食</div>
                 </div>
                  <div class="second_second">
                    <img class="food_1" src="statics/food-2.png"/>
                    <div class="food_xiawucha">下午茶</div>
                 </div>
              </div>
              <div class="second_2">
                  <div>
                      <img class="food_1" src="statics/food-3.png"/>
                      <div class="food_shangchao">商超便利</div>
                  </div>
                  <div class="second_second">
                      <img class="food_1" src="statics/food-4.png"/>
                      <div class="food_yuding">预定早餐</div>
                  </div>
              </div>
              <div class="second_3">
                  <div>
                      <img class="food_1" src="statics/food-5.png"/>
                      <div class="food_shangchao">果蔬生鲜</div>
                  </div>
                  <div class="second_second">
                      <img class="food_1" src="statics/food-6.png"/>
                      <div class="food_yuding">炸鸡炸串</div>
                  </div>
              </div>
              <div class="second_4">
                  <div>
                      <img class="food_1" src="statics/food-7.png"/>
                      <div class="food_shangchao">大牌5折</div>
                  </div>
                  <div class="second_second">
                      <img class="food_1" src="statics/food-8.png"/>
                      <div class="food_yuding">甜品饮品</div>
                  </div>
              </div>
          </div>

            <div class="swiper-slide">
                <div class="second_1">
                    <div >
                        <img class="food_1" src="statics/food-9.png"/>
                        <div class="food_shangchao">医药健康</div>
                    </div>
                    <div class="second_second">
                        <img class="food_1" src="statics/food-11.jpeg"/>
                        <div class="food_xiawucha">麻辣烫</div>
                    </div>

                </div>
                <div class="second_2">
                    <div>
                        <img class="food_1" src="statics/food-10.png"/>
                        <div class="food_shangchao">浪漫鲜花</div>
                    </div>
                    <div class="second_second">
                        <img class="food_1" src="statics/food-13.png"/>
                        <div class="food_yuding">披萨意面</div>
                    </div>
                </div>
                <div class="second_3">
                    <div>
                        <img class="food_1" src="statics/food-12.png"/>
                        <div class="food_shangchao">地方菜系</div>
                    </div>
                    <div class="second_second">
                        <img class="food_1" src="statics/food-16.png"/>
                        <div class="food_yuding">快餐便当</div>
                    </div>
                </div>
                <div class="second_4">
                    <div>
                        <img class="food_1" src="statics/food-14.png"/>
                        <div class="food_shangchao">准时到达</div>
                    </div>
                    <div class="second_second">
                        <img class="food_1" src="statics/food-15.png"/>
                        <div class="food_yuding">地方小吃</div>
                    </div>
                </div>
            </div>
            </div>
        </div>

    <!-- Add Pagination -->
    <div class="second_button1"  >          <!-- 设置滑动控件位置-->
    <div class="swiper-pagination"></div>
    </div>

    <div class="swiper-container2" onmouseover="mOver(this)" onmouseout="mOut(this)">
        <div class="wrap" style="left:-380px;">
                <img  src="statics/food-list-5.jpeg">
                <img  src="statics/food-list-1.png">
                <img  src="statics/food-list-2.jpeg">
                <img  src="statics/food-list-3.jpeg">
                <img  src="statics/food-list-4.jpeg">
                <img  src="statics/food-list-5.jpeg">
                <img  src="statics/food-list-1.png">
            </div>
        <div class="buttons">
            <span id="button_1">1</span>
            <span id="button_2">2</span>
            <span id="button_3">3</span>
            <span id="button_4">4</span>
            <span id="button_5">5</span>
        </div>
        <a href="javascript:" class="arrow arrow_left">&lt;</a>
        <a href="javascript:" class="arrow arrow_right">&gt;</a>
        </div>
    <div class="four_content">
        <img class="food_17" src="statics/food-17.jpeg" />
        <img class="food_18" src="statics/food-18.jpeg"  />
    </div>
</div>
    <div class="chapter2" style="display: none"  >
        text
    </div>
    <div class="chapter3" style="display: none"  >
        text
    </div>
    <div class="chapter4" style="display: none"  >
        text
    </div>
    <div class="navigation">
        <div class="navigation_total" >
        <div class="navigation1">
            <img id="waimai" class="navigation_1" src="statics/waimai.png"/>
            <div class="navigation_text">外卖</div>
        </div>
        <div id="find" class="navigation2">
            <img class="navigation_1" src="statics/find.png"/>
            <div class="navigation_text">发现</div>
        </div>
        <div id="form" class="navigation3">
            <img class="navigation_1" src="statics/form.png"/>
            <div class="navigation_text">订单</div>
        </div>
        <div id="mine" class="navigation4">
            <img class="navigation_1" src="statics/mine.png"/>
            <div class="navigation_text">我的</div>
        </div>
        </div>
    </div>


</div>





<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script src="js/wrap.js"></script>


<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            }
        }
    });

</script>
</body>
</html>